<template>
  <view class="content padding-bottom-sm">
    <view class="" style="background-color: #fff;">
      <u-tabs lineWidth="30" lineColor="#7D81A9" :activeStyle="{
	            color: '#7D81A9',
	            fontWeight: 'bold',
	            transform: 'scale(1)'
	        }" :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }" itemStyle="width:200rpx; height: 70rpx;" :list="list1" @click="click" :current="current"></u-tabs>
    </view>
    <view class="list ">
      <view class="item" v-for="(item,index) in form " :key="index" @tap="goDetail(item.order_sn)">
        <image v-if="item.list_state == '待处理'" class="stateImg" src="../../static/img/Slice 75 (1)11.png"></image>
        <image v-if="item.list_state == '报名已同意' || item.list_state == '邀约已同意'" class="stateImg" src="../../static/img/Slice 75 (1)44.png"></image>
        <image v-if="item.list_state == '已结束'|| item.list_state == '报名已拒绝'|| item.list_state == '邀约已拒绝'" class="stateImg" src="../../static/img/Slice 76.png"></image>
        <image v-if="item.list_state == '已邀约'" class="stateImg" src="../../static/img/Slice 75.png"></image>
        <view class="itemContent">
          <view class="title">
            <view class="name">
              {{item.shop_name}}
            </view>
            <view class="money" style="font-size: 20rpx;">
              <span>{{item.price}}</span>
            </view>
          </view>
          <view class="lableBoxS">
            <view style="background-color: #DDE3F9;">
              {{item.city_data}}
            </view>
            <view style="background-color: #FFDFC1;">
              {{item.category_name}}
            </view>
            <view style="background-color: #CAE5BD;">
              {{item.content_type_name}}
            </view>
          </view>
          <view class="time">
            截止：{{item.recruit_end_time}}
          </view>
          <view class="time" v-if="item.video_url">
            视频链接：{{item.video_url}}
          </view>
          <view class="time" v-if="item.store_name">
            探店门店：{{item.store_name}}
          </view>
          <view class="time" v-if="item.time">
            探店时间：{{item.time}}
          </view>
          <view class="time" v-if="item.join_sales_level">
            报名带货力等级：Lv{{item.join_sales_level}}
          </view>
          <view class="bottomBox">
            <view class="avatar">
              <image :src="item.avatar" mode=""></image>
            </view>
            <view class="userName">
              {{item.nickname}}
            </view>
            <view class="identityBoxS">
              <view class="" v-for="(item1,i1) in item.identity_type" :key="i1">
                {{item1}}
              </view>
            </view>
            <view class="btnS">
              <span class="wcBtn" @tap.stop="complete_order(item)" v-if="item.list_state == '报名已同意' ||item.list_state == '邀约已同意'">完成商单</span>
              <image class="shareImg" src="../../static/img/Frame999.png" mode="" v-if="item.list_state == '报名已同意' ||item.list_state == '邀约已同意'"
                @click.stop="clickbbb(item,item.order_join_id)"></image>
              <image class="shareImg" src="../../static/img/Frame (3)222.png" mode=""
                v-if="item.list_state == '待处理'"
                @tap.stop="get_join_data(item,2)">
              </image>
              <image class="shareImg" src="../../static/img/Frame (3)9999.png" v-if="item.list_state == '已完成'" mode="">
              </image>
              <image class="shareImg" src="../../static/img/Frame 8888.png" @click.stop="clickb(item.order_join_id)"
                v-if="item.list_state == '已邀约'" mode=""></image>
              <image class="shareImg" src="../../static/img/Frame (3)99999.png" v-if="item.list_state == '已邀约'"
                @click.stop="clicks(item,1)" mode=""></image>
              <button class="btnNone" style="width: 52rpx;height: 52rpx;display: flex;align-items: top;"
                open-type="share" catchtap="share">
                <image class="shareImg"  style="width: 52rpx;height: 52rpx;" src="../../static/img/Frame.png" mode=""></image>
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选 -->
    <u-popup :show="screenShow2" title="" mode="bottom" @close="screenShow2 = false" closeable width="100%">
      <view class="screenContent " style="height: 500rpx; padding: 30rpx;">
        <view class="">
          <view class="u-flex-between padding-sm">
            回填已发布的视频链接
          </view>
        </view>
        <view class="padding-sm">
          <u-input shape='circle' placeholder="请输入视频链接" border="surround" v-model="video_url"
            @change="change"></u-input>
        </view>
        <view class="screenBtns">
          <view class="btn" @tap="resettingurl">
            重置
          </view>
          <view class="btn" style="background: #7D81A9;color: #fff;margin-right: 0;" @tap="confirmFilter">
            确认
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 筛选 -->
    <u-popup :show="screenShow3" title="" mode="bottom" @close="screenShow3 = false" closeable width="100%">
      <view class="screenContent " style="height: 500rpx; padding: 30rpx; background-color: #f2f3f6;">
        <view class="padding-sm">
          <u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
            <u-form-item labelWidth=' 100' label="探店时间" prop="userInfo.name" borderBottom ref="item1">
              <u-input placeholder="请输入探店时间" v-model="time" border='none'></u-input>
            </u-form-item>
            <u-form-item labelWidth=' 100' label="报名带货力等级" prop="userInfo.name" borderBottom ref="item1">
              <u-input placeholder="请输入报名带货力等级" v-model="sales_level" border='none'></u-input>
            </u-form-item>
            <u-form-item labelWidth=' 100' label="粉丝数" prop="userInfo.name" borderBottom ref="item1">
              <u-input placeholder="请输入粉丝数" v-model="num" border='none'></u-input>
            </u-form-item>
            <u-form-item labelWidth=' 100' label="备注" prop="userInfo.name" borderBottom ref="item1">
              <u-input placeholder="请输入备注" v-model="remark" border='none'></u-input>
            </u-form-item>

          </u-form>
        </view>
        <view class="screenBtns">
          <view class="btn" @tap="resetting">
            重置
          </view>
          <view class="btn" style="background: #7D81A9;color: #fff;margin-right: 0;" @tap="confirmFilter2">
            确认
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 报名弹框 -->
    <u-popup class="applicationBox" :show="applicationShow" @close="applicationShow = false" :round="10">
      <view class="applicationContent">
        <view class="title" style="height: 50rpx;">
        </view>
        <u--form labelPosition="left" :model="form" ref="formRef" labelWidth="196rpx" :labelStyle="labelStyle">
          <u-form-item prop="oldpwd" label="时间" borderBottom>
            <view style="display: flex;" @tap="addTime(1)">
              <span style="flex: 1;text-align: right;">{{timeValue}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="门店" borderBottom>
            <view style="display: flex;" @tap="goShopAddress">
              <span style="flex: 1;text-align: right;">{{shopAddressValue}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="报名带货力等级" borderBottom labelWidth="300rpx">
            <view style="display: flex;" @tap="addGrade(1)">
              <span style="flex: 1;text-align: right;">{{gradeValue}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="到店人数" borderBottom>
            <u-input placeholder="请输入" inputAlign='right' :type="oldpwdType" v-model="agree_invite.num" border="none">
            </u-input>
          </u-form-item>
          <u-form-item prop="oldpwd" label="备注" borderBottom>
            <u-input placeholder="请输入" inputAlign='right' :type="oldpwdType" v-model="agree_invite.remark"
              border="none">
            </u-input>
          </u-form-item>
        </u--form>

        <view class="applicationBtns">
          <view class="qxBtn" @tap="applicationShow = false">
            取消报名
          </view>
          <view class="qrBtn" @tap="application">
            确认报名
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 修改报名弹框 -->
    <u-popup class="applicationBox" :show="gaiShow" @close="gaiShow = false" :round="10">
      <view class="applicationContent">
        <view class="title" style="height: 50rpx;">
        </view>
        <u--form labelPosition="left" :model="form" ref="formRef" labelWidth="196rpx" :labelStyle="labelStyle">
          <u-form-item prop="oldpwd" label="时间" borderBottom>
            <view style="display: flex;" @tap="addTime(2)">
              <span style="flex: 1;text-align: right;">{{edit_join_data.time}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="门店" borderBottom>
            <view style="display: flex;" @tap="goShopAddress">
              <span style="flex: 1;text-align: right;">{{shopAddressValue1}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="报名带货力等级" borderBottom labelWidth="300rpx">
            <view style="display: flex;" @tap="addGrade(2)">
              <span style="flex: 1;text-align: right;">{{gradeValue1}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="到店人数" borderBottom>
            <u-input placeholder="请输入" inputAlign='right' :type="oldpwdType" v-model="edit_join_data.num" border="none">
            </u-input>
          </u-form-item>
          <u-form-item prop="oldpwd" label="备注" borderBottom>
            <u-input placeholder="请输入" inputAlign='right' :type="oldpwdType" v-model="edit_join_data.remark"
              border="none">
            </u-input>
          </u-form-item>
        </u--form>

        <view class="applicationBtns">
          <view class="qxBtn" @tap="gaiShow = false">
            取消修改
          </view>
          <view class="qrBtn" @tap="shanchushow = true">
            确认修改
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 时间弹框 -->
    <u-datetime-picker confirmColor="#7D81A9" @cancel="timeCancel" @confirm="confirmTime" :show="timeShow"
      v-model="confirm_join_info.time" mode="datetime" :formatter="formatter"></u-datetime-picker>
    <!-- 带货力等级弹框 -->
    <u-picker :show="gradeShow" confirmColor="#7D81A9" @cancel="gradeCancel" @confirm="confirmGrade"
      :columns="grade"></u-picker>

    <!-- 确认弹框 -->
    <u-modal :show="shanchushow" style="text-align: center;" confirmText="确认" cancelText="取消" showCancelButton
      cancelColor="#1D2129" confirmColor="#7D81A9" @cancel="shanchushow = false" close @confirm="edit_join_data_btn">
      若修改信息，需商家重新同意。是否确认修改？
    </u-modal>
  </view>
</template>

<script>
  export default {

    data() {
      return {
        time: '',
        sales_level: '',
        num: '',
        remark: '',
        video_url: '',
        gai: '',
        shanchushow: false,
        screenShow2: false,
        screenShow3: false,
        timeShow: false,
        gradeShow: false,
        gaiShow: false,
        order_sn: '',
        timeValue: '',
        gradeValue1: '',
        shopAddressValue1: '',
        form: [],
        obj: {
          type: 1
        },
        value: '',
        grade: [
          ['Lv0', 'Lv1', 'Lv2', 'Lv3', 'Lv4', 'Lv5', 'Lv6', 'Lv7']
        ],
        gradeValue: '',
        // 1:全部，2：已报名，3：已通过，4：已结束，5：被邀约
        list1: [{
          name: '全部',
        }, {
          name: '已报名',
        }, {
          name: '已通过'
        }, {
          name: '已结束'
        }, {
          name: '被邀约'
        }],
        current: 0,
        agree_invite: {
          order_join_id: '',
          time: '',
          store_id: '',
          sales_level: '',
          num: '',
          remark: ''
        },
        edit_join_data: {
          time: '',
          store_id: '',
          sales_level: '',
          num: '',
          remark: ''
        },
        applicationShow: false,
        shopAddressValue: '请选择门店',
        dataType: '',
        order_join_id: '',
      };
    },
    created() {

    },
    onShow() {
      let that = this
      const shopAddress = uni.getStorageSync('name');
      this.agree_invite.store_id = uni.getStorageSync('store_id');
      if (!shopAddress) {
        this.shopAddressValue = '请选择门店'
      } else {
        if(this.dataType == 1) {
          this.shopAddressValue = shopAddress
        }else {
          this.shopAddressValue1 = shopAddress
        }
      }
    },
    async onLoad(obj) {
      if (obj.id) {
        obj.id = obj.id - 0
        this.obj.type = obj.id + 1
        this.current = obj.id
      }
      const res = await uni.$http.post('order/get_my_order_list', this.obj)
      console.log('5555', res.data.data);
      this.form = res.data.data
    },
    methods: {
      // 打开时间选择
      addTime(n) {
        this.dataType = n
        this.applicationShow = false
        this.timeShow = true
      },
      // 关闭时间选择
      timeCancel() {
        this.applicationShow = true
        this.timeShow = false
      },
      // 确认时间
      async confirmTime(e) {
        this.timeShow = false
        if (this.dataType == 1) {
          this.applicationShow = true
          const timeFormat = uni.$u.timeFormat;
          let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM');
          this.timeValue = timeValue
          this.agree_invite.time = timeValue
        }
        if (this.dataType == 2) {
          this.gaiShow = true
          const timeFormat = uni.$u.timeFormat;
          let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM');
          console.log(timeValue);
          this.edit_join_data.time = timeValue
          console.log(this.edit_join_data.time);
        }
      },
      // 打开带货力等级
      addGrade(n) {
        this.dataType = n
        if (n == 1) {
          this.applicationShow = false
        }
        if (n == 2) {
          this.gaiShow = false
        }
        this.gradeShow = true
      },
      // 关闭带货力等级
      gradeCancel() {
        if (this.gai == 1) {
          this.applicationShow = true
        } else if (this.gai == 2) {
          this.gaiShow = true
        }
        this.gradeShow = false
      },
      // 确认带货力等级
      async confirmGrade(e) {
        this.gradeShow = false
        if (this.dataType == 1) {
          this.applicationShow = true
          this.gradeValue = e.value[0]
          if (this.gradeValue == 'Lv0') {
            this.agree_invite.sales_level = 0
          }
          if (this.gradeValue == 'Lv1') {
            this.agree_invite.sales_level = 1
          }
          if (this.gradeValue == 'Lv2') {
            this.agree_invite.sales_level = 2
          }
          if (this.gradeValue == 'Lv3') {
            this.agree_invite.sales_level = 3
          }
          if (this.gradeValue == 'Lv4') {
            this.agree_invite.sales_level = 4
          }
          if (this.gradeValue == 'Lv5') {
            this.agree_invite.sales_level = 5
          }
          if (this.gradeValue == 'Lv6') {
            this.agree_invite.sales_level = 6
          }
          if (this.gradeValue == 'Lv7') {
            this.agree_invite.sales_level = 7
          }
        } else {
          this.gaiShow = true
          this.gradeValue1 = e.value[0]
          if (this.gradeValue1 == 'Lv0') {
            this.edit_join_data.sales_level = 0
          }
          if (this.gradeValue1 == 'Lv1') {
            this.edit_join_data.sales_level = 1
          }
          if (this.gradeValue1 == 'Lv2') {
            this.edit_join_data.sales_level = 2
          }
          if (this.gradeValue1 == 'Lv3') {
            this.edit_join_data.sales_level = 3
          }
          if (this.gradeValue1 == 'Lv4') {
            this.edit_join_data.sales_level = 4
          }
          if (this.gradeValue1 == 'Lv5') {
            this.edit_join_data.sales_level = 5
          }
          if (this.gradeValue1 == 'Lv6') {
            this.edit_join_data.sales_level = 6
          }
          if (this.gradeValue1 == 'Lv7') {
            this.edit_join_data.sales_level = 7
          }
        }
      },
      // 跳转门店地址选择
      goShopAddress() {
        uni.navigateTo({
          url: '/pages/shopAddress/shopAddress?order_sn=' + this.order_sn
        })
      },
      // 跳转详情
      goDetail(order_sn) {
        uni.navigateTo({
          url: '/pages/orderDetails/orderDetails?order_sn=' + order_sn
        })
      },
      async clickb(id) {
        const aaa = {
          order_join_id: id,
        }
        const res = await uni.$http.post('order/refuse_invite', aaa)
        if (res.data.code != 1) {
          this.toast.msg(res.msg)
          return
        } else {
          uni.showToast({
            title: '操作成功',
            icon: 'success'
          });
        }
      },
      clickbbb(order_join_id) {
        this.screenShow2 = true
        this.order_join_id = order_join_id
      },
      async confirmFilter() {
        if(!this.video_url) {
          this.toast.msg('请填写链接')
        } 
        let aaa = {
          order_join_id: this.order_join_id.order_join_id,
          video_url: this.video_url
        }
        const res = await uni.$http.post('order/set_video_url', aaa)
        if (res.data.code != 1) {
          this.toast.msg(res.msg)
        } else {
          uni.showToast({
            title: '已完成',
            icon: 'success'
          });
          this.screenShow2 = false
        }
      },
      async clicks(item, n) {
        this.gai = n
        this.applicationShow = true
        this.agree_invite.order_join_id = item.order_join_id
        this.order_sn = item.order_sn
      },
      async application() {
        const {
          data: res
        } = await uni.$http.post('order/agree_invite', this.agree_invite)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        } else {
          this.applicationShow = false
        }
      },
      // 跳转详情
      async goDetaila(order_join_id) {
        const aaa = {
          order_join_id: order_join_id
        }
        const res = await uni.$http.post('order/get_my_order_list', aaa)
        if (res.data.code != 1) {
          this.toast.msg(res.msg)
        } else {
          uni.showToast({
            title: '已完成',
            icon: 'success'
          });
        }
      },
      async click(e) {
        this.obj.type = e.index + 1
        const res = await uni.$http.post('order/get_my_order_list', this.obj)
        this.form = res.data.data
      },
      // 获取报名信息弹框
      async get_join_data(i, n) {
        this.order_sn = i.order_sn
        console.log(this.order_sn);
        this.gai == n
        const obj = {
          order_join_id: i.order_join_id
        }
        const {
          data: res
        } = await uni.$http.post('order/get_join_data', obj)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        } else {
          console.log(res);
          this.edit_join_data.order_join_id = i.order_join_id
          this.edit_join_data.time = res.data.time
          this.edit_join_data.store_id = res.data.order_store_id
          this.edit_join_data.sales_level = res.data.sales_level
          this.edit_join_data.num = res.data.num
          this.edit_join_data.remark = res.data.remark
          this.gradeValue1 = 'Lv' + this.edit_join_data.sales_level
          const {
            data: res1
          } = await uni.$http.post('join_order/get_store_list', {
            order_sn: i.order_sn
          })
          if(res1.data.show_state == '0' ) {
            res1.data.data.forEach((item) => {
              if (this.edit_join_data.store_id == item.store_id) {
                this.shopAddressValue1 = item.store_name
              }
            })
          }else {
             this.shopAddressValue1 = '商家自定义门店'
          }
          this.gaiShow = true
        }
      },
      async edit_join_data_btn() {
        this.gaiShow = false
        const {
          data: res
        } = await uni.$http.post('order/edit_join_data', this.edit_join_data)
        this.shanchushow = false
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        } else {
          this.toast.msg(res.msg)
        }
      },
      async complete_order(item) {
        const {data :res} = await uni.$http.post('order/complete_order',{order_join_id:item.order_join_id})
        this.toast.msg(res.msg)
      },
      resettingurl() {
        this.video_url = ''
      }
    }
  }
</script>

<style lang="scss">
  .content {
    // min-height: 100vh;
    background-color: #F2F3F6;

    .applicationContent {
      padding-left: 40rpx;

      .title {
        height: 100rpx;
        line-height: 100rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 600;
        color: #000000;
      }

      .u-form-item {
        height: 108rpx;
        // margin-right: 20rpx;
        padding-right: 20rpx;

        span {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.4);
        }

        image {
          display: inline-block;
          vertical-align: middle;
          width: 42rpx;
          height: 42rpx;
        }
      }

      .applicationBtns {
        height: 162rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;

        view {
          width: 320rpx;
          height: 80rpx;
          line-height: 80rpx;
          border-radius: 40rpx;
          text-align: center;
        }

        .qxBtn {
          box-sizing: border-box;
          border: 2rpx solid rgba(125, 129, 169, 0.3);
          color: #7D81A9;
          margin-right: 22rpx;
        }

        .qrBtn {
          background: #7D81A9;
          color: #fff;
        }
      }
    }

    .screenContent {
      box-sizing: border-box;
      overflow: scroll;

      .itemBox {
        margin-bottom: 10rpx;

        .title {
          font-size: 32rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          margin-bottom: 32rpx;
        }

        .item {
          display: inline-block;
          width: 156rpx;
          height: 64rpx;
          background: #F2F3F6;
          border-radius: 200rpx;
          margin-right: 22rpx;
          margin-bottom: 32rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          text-align: center;
          line-height: 64rpx;
        }

        .item:nth-child(4n) {
          margin-right: 0;
        }

        .active {
          background-color: #7D81A9;
          color: #FFFFFF;
        }
      }

      .screenBtns {
        width: 662rpx;
        margin: 0 auto;
        margin-top: 40rpx;
        display: flex;
        margin-bottom: 50rpx;

        .btn {
          width: 320rpx;
          height: 80rpx;
          border-radius: 40rpx;
          text-align: center;
          line-height: 80rpx;
          font-size: 28rpx;
          color: #7D81A9;
          border: 2rpx solid rgba(125, 129, 169, 0.3);
          box-sizing: border-box;
          margin-right: 22rpx;
        }
      }
    }


    .list {
      .item {
        width: 686rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin: 24rpx auto;
        padding:46rpx 24rpx 34rpx;
        position: relative;
        .stateImg {
          position: absolute;
          top: 0;
          left: 0;
          width: 92rpx;
          height: 36rpx;
        }

        .itemContent {
          padding: 0 22rpx 0 24rpx;

          .title {
            display: flex;
            align-items: center;

            .name {
              width: 380rpx;
              font-size: 32rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #000000;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .money {
              flex: 1;
              text-align: right;
              color: #EAA04A;
              font-size: 36rpx;
            }
          }

          .lableBoxS {
            display: flex;
            color: rgba(0, 0, 0, 0.6);
            font-size: 20rpx;
            margin-top: 14rpx;
            margin-bottom: 18rpx;

            view {
              height: 32rpx;
              line-height: 32rpx;
              padding: 0 12rpx;
              border-radius: 22rpx;
              margin-right: 8rpx;
            }
          }

          .time {
            font-size: 24rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
            // margin-bottom: 24rpx;
          }

          .bottomBox {
            display: flex;
            align-items: center;
            height: 52rpx;

            .avatar {
              width: 36rpx;
              height: 36rpx;
              border-radius: 18rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .userName {
              font-size: 24rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              color: rgba(0, 0, 0, 0.6);
              margin: 0 8rpx;
            }

            .identityBoxS {
              flex: 1;
              display: flex;

              view {
                // width: 52rpx;
                height: 24rpx;
                padding: 0 8rpx;
                line-height: 22rpx;
                text-align: center;
                margin-right: 4rpx;
                background-color: #B0A5FF;
                color: #FFFFFF;
                font-size: 18rpx;
                border-radius: 10rpx 0 10rpx;
              }
            }

            .btnS {
              display: flex;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                font-size: 24rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                margin-right: 16rpx;
              }

              .shareImg {
                width: 52rpx;
                height: 52rpx;
                margin: 0 4rpx;
              }
            }
          }
        }
      }
    }


  }

  .screenBtns {
    width: 662rpx;
    margin: 0 auto;
    margin-top: 40rpx;
    display: flex;

    .btn {
      width: 320rpx;
      height: 80rpx;
      border-radius: 40rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #7D81A9;
      border: 2rpx solid rgba(125, 129, 169, 0.3);
      box-sizing: border-box;
      margin-right: 22rpx;
    }
  
  }
  .wcBtn {
    width: 128rpx;
    height: 52rpx;
    line-height: 52rpx;
    background: #7D81A9;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    margin-right: 16rpx;
    text-align: center;
  }
  
</style>